<template>
  <div class="progress-teacher">
    <div class="config-title">学生进度</div>
    <div class="progress-bar">
      <div class="sequence-number">序号</div>
      <div class="config-name">姓名</div>
      <div class="config-name">邮箱</div>
      <div class="config-name">学习进度</div>
    </div>
    <div class="student-list-container">
      <div v-for="(item,index) in studentList" :key="index">
        <StudentProgressEntrance :info="item" :sequence-number="index" @fresh="refresh"/>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/common/api"
import StudentProgressEntrance from "@/pages/training/courses/component/StudentProgressEntrance"

export default {
  name: "TeacherProgress",
  components:{
    StudentProgressEntrance
  },
  data(){
    return {
      studentList:[
        {
          login: "111",
          progress:"0.571",
          email:"111222333@qq.com"
        }
      ]
    }
  },
  mounted() {
    this.refresh()
  },
  methods:{
    // 刷新学习进度列表
    refresh() {
      // 获取学生列表及每个学生对应的学习进度
      this.$getCPG(api.getUserListProgress).then(res=>{
        console.log("========================")
        console.log(res)
        if (res.code === 200) {
          this.studentList=res.data
        }
      }).catch(err=>{
        console.log(err)
      })
    }
  }


}
</script>

<style lang="less" scoped>
@import "./../../../styles/global.less";
.progress-teacher{
  .progres-bar {
    background-color: #fff;
    width: 100%;
    height: 90px;
    padding: 0 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .question-bar-title {
      font-size: 16px;
      font-family: PingFang SC, sans-serif;
      font-weight: 400;
      line-height: 22px;
      color: #242425;
    }
    .purple-button {
      width: 120px;
      height: 30px;
      font-size: 16px;
    }
  }
  .progress{
    display: flex;
  }
  .progress-bar {
    .sequence-number {
      padding-left: 10px;
      font-size: 17px;
    }
    .config-name {
      flex: 1;
      font-size: 17px;
    }
    display: flex;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
  }
  .student-list-container{
    background-color: white;
    border-radius: 2px;
    padding: 30px;
  }
}

</style>
